<template>
  <NavBar :changeComponent />
  <main>
    <component :is="components[currentComponent]"></component>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import NavBar from '@/components/NavBar.vue';
import Home from '@/components/Home.vue';
import Order from '@/components/Order.vue';

const currentComponent = ref('Home');
const components = {
  Home,
  Order,
};

function changeComponent(component) {
  currentComponent.value = component;
}

// const counter = ref(0);

// function decrement() {
//   counter.value--;
// }

// function increment() {
//   counter.value++;
// }
</script>

<style scoped>
main {
  text-align: center;
}
</style>
